<template>
	<view class="pt-1">
		<view class=" bg-white rounded mx-1 p-2">
			<view class="flex" v-if="detail.goods_info">
				<image class="rounded bgf7f7f7" :src="detail.goods_info.goods_img" mode="aspectFill"
					style="width: 200rpx;height: 200rpx;">
				</image>
				<view class="ml-2  fs-32 flex flex-column flex-1">
					<text class="font-weight-bold">{{detail.goods_info.goods_name}}</text>
					<view class="flex align-center justify-between my-1">
						<text class="fs-24 ft666666 ">规格:{{ruleText}}</text>
						<text class="fs-24 ft666666 mr-2">x{{detail.goods_num}} </text>
					</view>
					<text class="fte87722 ">¥{{detail.goods_single_price}}</text>
				</view>
			</view>
			<view class="flex align-center fs-24 bg-linear1 text-white rounded-circle py-1 mt-3 px-2"
				v-if="detail.recent_end">
				<view class="flex-1 flex align-center">
					<view class="bg-white fte87722 font-icon mr-2">始</view>
					<view class="flex flex-column">
						<text>起租日</text>
						<text>{{detail.rencent_start.split(' ')[0]}}</text>
					</view>
				</view>
				<view class="flex-1 flex align-center">
					<view class="bg-white fte87722 font-icon mr-2">还</view>
					<view class="flex flex-column">
						<text>归还日</text>
						<text>{{detail.recent_end.split(' ')[0]}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white rounded mt-2 p-2 mx-1 fs-24">
			<view class="flex align-center justify-between">
				<text class="ft666666">订单状态：</text>
				<text class="fte87722 fs-32">{{detail.status_text}}</text>
			</view>
			<view class="flex align-center justify-between my-2">
				<text class="ft666666">订单号：</text>
				<text>{{detail.order_agreement_no}}</text>
			</view>
			<view class="flex align-center justify-between my-2">
				<text class="ft666666">下单时间：</text>
				<text>{{detail.create_time}}</text>
			</view>
			<view class="flex align-center justify-between"
				v-if="(detail.status != 10 && type == 'return') || (detail.status != 1 && type == 'pickup')">
				<text class="ft666666">备注：</text>
				<input class="flex-1" type="text" placeholder="请输入备注" v-model.trim="remark">
			</view>

		</view>
		<view class="bge87722cc text-center py-2 rounded-circle mx-1 text-white mt-4"
			v-if="((detail.status == 10 || detail.status == 4) && type == 'return') || (detail.status == 1 && type == 'pickup')"
			@click="confirmFn">
			{{loading?'确认中':'确认'}}
		</view>
	</view>
</template>

<script>
	import {
		getOrderDetail,
		confirmPickup,
		confirmReturn
	} from '@/api/store.js'
	export default {
		data() {
			return {
				sn: '',
				detail: {
					id: ''
				},
				remark: '',
				sku_data: {},
				ruleText: '',
				type: '',
				loading: false
			}
		},
		onLoad(option) {
			this.sn = option.sn
			this.type = option.type
			uni.setNavigationBarTitle({
				title: this.type == 'return' ? '归还订单' : "自提订单",
			});
			this.loadData()
		},
		methods: {
			loadData() {
				getOrderDetail({
					order_id: this.sn
				}).then(res => {
					this.detail = res.data
					this.sku_data = this.detail.sku_data
					this.ruleText = Object.keys(this.sku_data.spec_attrs).map(key => {
						let str = ''
						if (key == '租期') {
							str += this.sku_data.spec_attrs[key] + '天'
						} else {
							str += this.sku_data.spec_attrs[key]
						}
						return str
					}).join(',')
				})
			},
			confirmFn() {
				if (this.loading) return;
				this.loading = true
				uni.showLoading()
				if (this.type == 'return') {
					this.confirmReturn()
				} else {
					this.confirmPickup()
				}
			},
			confirmReturn() {
				const data = {
					order_id: this.sn,
				}
				if (this.remark) data.remark = this.remark
				confirmReturn(data).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					setTimeout(() => {
						this.loading = false
						uni.hideLoading()
						uni.redirectTo({
							url: `/pages/store/orderDetail?sn=${this.sn}`
						})
					}, 1000)
				})
			},
			confirmPickup() {
				const data = {
					order_id: this.sn,
				}
				if (this.remark) data.remark = this.remark
				confirmPickup(data).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					setTimeout(() => {
						this.loading = false
						uni.hideLoading()
						uni.redirectTo({
							url: `/pages/store/orderDetail?sn=${this.sn}`
						})
					}, 1500)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.font-icon {
		width: 30px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		border-radius: 50px;
	}
</style>